<template>
	<view>
		<view v-if="comments.length == 0" style="margin-top: 50rpx; text-align: center;font-size:100%; color: #909399;">
			（暂无评论）
		</view>
		<view v-else v-for="(item,index) in comments" :key="index">
			<u-card :title="item.questionTitle" :thumb="item.avatar" @tap="goDetail(index)">
				<view class="" slot="body">
					<view class="u-body-item u-flex u-col-between u-p-t-0">
						<view class="u-body-item-title u-line-2 contentStyle">{{item.questionContent}}</view>
					</view>
				</view>
				<view class="u-line-1" slot="foot">
					<u-icon name="chat-fill" size="30" color="" :label="item.replyTimes" label-size="20" color="#4169E1" style="margin-left: 10rpx;"></u-icon><text
					 style="margin-left: 170rpx;font-size: 20rpx;color: #F29100;">{{item.releaseTime}}</text><text style="margin-left: 150rpx;font-size: 20rpx;color: #19BE6B;">{{item.userName}}</text>
				</view>
			</u-card>
		</view>
		
		<view class="editStyle" @tap="releaseComment">
			<u-icon name="edit-pen" size="50" color="#ffffff" style="padding: 25rpx;"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		getComments,
		getReply
	} from '@/api/modules/commentarea.js'
	export default {
		props: {
			courseID: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				comments: [],
				replys: [],
				newComment: {
					courseId: '',
					userEmail: '',
					proposeTitle: '',
					proposeQuestion: '',
				},
				show: false,
			};
		},
		mounted() {
			let that = this
			let courseId = this.courseID
			let isTrue = ""
			isTrue = uni.getStorageSync('comments')
			if (isTrue != "") {
				that.comments = uni.getStorageSync('comments')
				uni.removeStorageSync('comments')
			}
			//console.log("这是课程界面的ID"+this.courseID)
			let data = {
				id: this.courseID
			}
			getComments(data)
				.then(resp => {
					// console.log(resp)
					that.comments = resp.data.arealist
					for (let i = 0; i < resp.data.arealist.length; i++) {
						this.comments[i].avatar = this.GOBAL.baseURL + 'userImages/' + this.comments[i].avatar;
					}
					uni.setStorageSync('comments', this.comments)
				})
				.catch(resp => {})
		}, 
		methods: {
			releaseComment() {
				uni.navigateTo({
					url: './courseDetails/NewComment?commentId=' + this.courseID,
					//url:'./courseDetails/commentDetail?courseid='+courseID+'&comment=' + encodeURIComponent(JSON.stringify(comments[0]))
				})
			},
			goDetail(params) {
				// let that = this;
				//注意这里的comments[0]要做修改，应该是哪个地方点击到，获取到他的index，作为下标，
				let that = this;
				that.comment = that.comments[params]
				let courseDetails = {
					commentId: that.comment.questionId
				};
				getReply(courseDetails)
					.then(resp => {
						this.replys = resp.data.replylist;
						uni.setStorageSync('replys', this.replys)
					})
					.catch(resp => {})
					//单个评论
				uni.setStorageSync('comment', that.comment)
				//问题ID
				uni.setStorageSync('questionId', that.comment.questionId),
					uni.setStorageSync('courseID', that.courseID),
					//console.log("这是对象数组"+that.comment.id+that.comment.question)
					uni.navigateTo({
						url: './courseDetails/commentDetail',
						//url:'./courseDetails/commentDetail?courseid='+courseID+'&comment=' + encodeURIComponent(JSON.stringify(comments[0]))
					})
			},
		},
		onShow(){},
		onLoad(){}	
	}
</script>

<style scoped lang="scss">
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	// 左边文字显示样式
	.textStyle {
		margin-left: 30rpx;
	}

	.titleStyle {
		font-size: 30rpx;
	}

	.contentStyle {
		margin-top: 30rpx;
		font-size: 20rpx;
	}

	.nameStyle {
		font-size: 15rpx;
	}

	.timeStyle {
		font-size: 15rpx;
	}

	.replyStyle {
		font-size: 15rpx;
	}

	.editStyle {
		background-color: #19BE6B;
		position: fixed;
		bottom: 150rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		display: block;
		z-index: 999;
		margin-left: 550rpx;
	}
</style>
